<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        section{
            width: 288px;
            height: 192px;
            background-color: red;
            margin: 50px auto;
            position: relative;
        }
        /* .contain{
            width: 30px;
            height: 30px;
            position: relative;
        } */
        .star{ 
            position:absolute;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
    border-bottom: 10px solid yellow;
    /* position: relative;
    transform: rotate(35deg); */
        }
        .star::before{
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
    border-bottom: 10px solid yellow;
    position:absolute;
    transform: rotate(70deg);
    left: -15px;
        }
        .star::after{
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
    border-bottom: 10px solid yellow;
    position:absolute;
    transform: rotate(145deg);
    left: -15px;
        }
        .small{
            /* transform: scale(0.6); */
        }
    
        .big{
            top: 50px;
            left: 30px;
            transform: rotate(-35deg) scale(2);
    
        }
        .small1{
            left: 76px;
            top: 14px;
            transform: rotate(0deg) scale(0.6);
        }
        .small2{
            left:90px;
            top: 38px;
            transform: rotate(0deg) scale(0.6);
        }
        .small3{
            left: 90px;
            top: 64px;
            transform: rotate(-30deg) scale(0.6);
        }
        .small4{
            left: 78px;
            top: 86px;
            transform: rotate(-20deg) scale(0.6);
        }
    </style>
<title>五星红旗</title>
</head>

<body>
<section>

<div class="star big"></div>
        
<div class="star small small1"></div>


<div class="contain">
<div class="star small small2"></div>
</div>
<div class="contain">
<div class="star small small3"></div>
</div>
<div class="contain">
<div class="star small small4"></div>
</div>
</section>


</body>
</html>
